import {SysMenuData, SysMenuAdd} from "@/pages/system/menu/type";
import {ReactNode} from "react";
import {UseFetchDataAction} from "@ant-design/pro-table/es/typing";
import {Button, Space, Tag} from "antd";
import {ProColumns} from "@ant-design/pro-table";
import {OptionActions} from "@/type/type";
import AddSysMenu from "@/pages/system/menu/list/components/AddSysMenu";
import {SysDictTypeData} from "@/pages/system/dict/type/type";
import {history} from "@@/core/history";


// @ts-ignore
const columns: ProColumns<SysMenuData> = (optionAction: OptionActions<SysMenuAdd>) => {
  return [
    {
      title: "菜单名称",
      dataIndex: "menuName",
      align: 'left',
      hideInSearch: true,
      render: (text: ReactNode, record: SysMenuData, index: number, action: UseFetchDataAction<SysDictTypeData>) => {
        if (record.componentPath) {
          return (
            <a type="link" onClick={() => {
              history.push({
                pathname: "/system/manager/menu/authButton",
                query: {
                  menuId: record.id as any,
                }
              })
            }}>{record.menuName}</a>
          )
        } else {
         return text
        }
      }
    },
    {
      title: "类型",
      dataIndex: "menu",
      align: 'center',
      hideInSearch: true,
      render: (text: ReactNode, record: SysMenuData, index: number, action: UseFetchDataAction<SysDictTypeData>) => {
        return record.menu ?
          (<Tag color="green">菜单</Tag>) :
          (<Tag color="yellow">按钮</Tag>)
      }
    },
    {
      title: "菜单图标",
      dataIndex: "icon",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "前端组件地址",
      dataIndex: "componentPath",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "组件路由",
      dataIndex: "route",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "需要的权限",
      dataIndex: "authorize",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "菜单排序",
      dataIndex: "sort",
      align: 'center',
      hideInSearch: true,
    },
    {
      title: "状态",
      dataIndex: "status",
      align: 'center',
      hideInSearch: true,
      render: (text: ReactNode, record: SysMenuData, index: number, action: UseFetchDataAction<SysDictTypeData>) => {
        const editStatus = (record: SysMenuData) => {
          optionAction.edit({
            ...record,
            status: !record.status
          })
        }
        return record.status ?
          (<Tag color="green" onClick={() => editStatus(record)}>启用</Tag>) :
          (<Tag color="yellow" onClick={() => editStatus(record)}>停用</Tag>)
      }
    },
    {
      title: "隐藏菜单",
      dataIndex: "hideInMenu",
      align: 'center',
      hideInSearch: true,
      render: (text: ReactNode, record: SysMenuData, index: number, action: UseFetchDataAction<SysDictTypeData>) => {
        const editStatus = (record: SysMenuData) => {
          optionAction.edit({
            ...record,
            hideInMenu: !record.hideInMenu
          })
        }
        return record.hideInMenu ?
          (<Tag color="green" onClick={() => editStatus(record)}>是</Tag>) :
          (<Tag color="yellow" onClick={() => editStatus(record)}>否</Tag>)
      }
    },
    {
      title: "操作",
      valueType: 'option',
      align: "center",
      key: "option",
      width: "200px",
      render: (text: ReactNode, record: SysMenuData, index: number, action: UseFetchDataAction<SysMenuData>) => {
        const addSysMenuProps = optionAction.editModal(record);
        return (
          <Space>
            {record.menu ?
              <AddSysMenu {...optionAction.addModal(record.id)} button={false}
                          trigger={<Button type="link">新增</Button>}/> : null}
            <AddSysMenu initialValues={record} menuPage={!record.menu} {...addSysMenuProps}/>

            <Button type="link" danger onClick={() => optionAction.remove([record.id])}>删除</Button>
          </Space>
        )
      }
    }
  ]


}


export default columns;
